<template>
  <div class="_cus-form-layout-box">
    <div class="_cus-form">
      <div class="_cus-form-box white-form-cus-style">
        <slot name="form" />
      </div>
      <slot name="foot" />
    </div>
    <div class="_cus-content">
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: "FormLayout"
}
</script>
<style scoped lang="scss">
._cus-form-layout-box {
  width: 100%;
  height: 100%;
  //   background: red;
  display: flex;

  ._cus-content {
    flex: 1;
    overflow-y: auto;
    background-color: transparent;
    margin-right: 15px;
  }

  ._cus-form {
    flex-direction: column;
    width: 280px;
    display: flex;
    align-items: center;
    background-color: RGBA(4, 30, 65, .4);
    margin-right: 15px;

    ._cus-form-box {
      width: 100%;
      height: 100%;
      padding: 6px;
      box-sizing: border-box;
      overflow-y: auto;
      // margin-bottom: 20px;
      overflow: -moz-scrollbars-none;

      &::-webkit-scrollbar {
        width: 4px;
        background-color: #f5f5f5;
        display: none;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #3b87f9;
      }
    }
  }
}
</style>
